<template>
    <el-aside width="200px">
        <el-scrollbar>
            <el-menu class="el-menu-vertical-demo" style="height: 100vh;" :router="true" :default-active="route.fullPath">

                <template v-for="data in rightList" :key="data.path">

                    <el-sub-menu :index="data.path" v-if="data.children.length && checkAuth(data.path)">
                        <template #title>
                            <el-icon>
                                <component :is="mapIcon[data.icon]"></component>
                            </el-icon>
                            {{ data.title }}
                        </template>
                        <el-menu-item :index="item.path" v-for="item in data.children" :key="item.path">
                            <el-icon>
                                <component :is="mapIcon[item.icon]"></component>
                            </el-icon>
                            {{ item.title }}
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item :index="data.path" v-else-if="checkAuth(data.path)">
                        <el-icon>
                            <!-- <Setting /> -->
                            <component :is="mapIcon[data.icon]"></component>
                        </el-icon>
                        <span>{{ data.title }}</span>
                    </el-menu-item>
                </template>
            </el-menu>

        </el-scrollbar>
    </el-aside>
</template>

<script setup >
import axios from 'axios'
import { onMounted, ref } from 'vue';
import { TrendCharts, User, List, Key, Grid, OfficeBuilding, PieChart, School } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router';
import { useUserStore } from '../../store/useUserStore';

const myIcon = "setting"
// 映射  后端返回的是字符串，需要映射成组件
const mapIcon = {TrendCharts,User, List, Key, Grid, OfficeBuilding, PieChart, School}
const rightList = ref([])
onMounted(async () => {
    let res = await axios.get('/adminapi/rights')
    rightList.value = res.data
})

const route = useRoute()
// 做菜单展示的权限控制(类同于路由守卫)
const { user: { role: { rights } } } = useUserStore()
const checkAuth = (path) => {
    return rights.includes(path)
}

 </script>